<template>
    <div class="rating_page">
        <van-cell-group title="基础信息">

            <van-cell title="头像" is-link>
                <template #default>
                    <i class="iconfont icon-touxiang"></i>
                </template>
            </van-cell>
            <van-cell title="账号">
                <template #default>
                    {{username}}
                </template>
            </van-cell>
            <van-cell title="昵称" is-link/>
            <van-cell title="简介" is-link/>
            <van-cell title="收货地址" is-link/>
        </van-cell-group>
        <van-cell-group title="账号绑定" class="g2">
            <van-cell>
                <template #title>
                    <i class="iconfont icon-shouji1"></i>
                    <span>手机</span>
                </template>
                <template #default>
                    <span  class="infotel">{{infotel}}</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <i class="iconfont icon-taobao"></i>
                    <span>淘宝</span>
                </template>
                <template #default>
                    <span>未绑定</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <i class="iconfont icon-zhifubao"></i>
                    <span>支付宝</span>
                </template>
                <template #default>
                    <span>未绑定</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <i class="iconfont icon-weibo-copy"></i>
                    <span>微博</span>
                </template>
                <template #default>
                    <span>未绑定</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <i class="iconfont icon-weixin"></i>
                    <span>微信</span>
                </template>
                <template #default>
                    <span>未绑定</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <i class="iconfont icon-eliaomo"></i>
                    <span>饿了么</span>
                </template>
                <template #default>
                    <span>未绑定</span>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="btn">
            <van-button type="danger" @click="quit">退出登录</van-button>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { removeStore } from '../../../config/mUtils'
import { Dialog } from 'vant'
export default {
  name: 'info',
  data () {
    return {
      username: '', // 用户名
      resetname: '', // 重置用户名
      infotel: '', // 用户手机
      avatar: '', // 用户头像
      isEnter: true, // 是否登录
      isLeave: false // 是否退出

    }
  },
  computed: {
    ...mapState([
      'userInfo'
    ])
  },
  created () {
    this.getinfo()
  },
  methods: {
    ...mapMutations([
      'OUT_LOGIN'
    ]),
    getinfo () {
      this.username = this.userInfo.username
      this.infotel = this.userInfo.mobile || '暂无绑定手机号'
    },
    async outLogin () {
      this.OUT_LOGIN()
      this.$router.go(-1)
      removeStore('user_id')
      await this.$http.signout()
    },
    quit () {
      Dialog.confirm({
        message: '是否退出登录'
      })
        .then(() => {
          this.outLogin()
        })
        .catch(() => {

        })
    }

  },
  watch: {
    userInfo: function (value) {
      console.log(value)
      if (value && value.user_id) {
        this.getinfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .icon {
        width: 30px;
        height: 30px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden
    }
    .rating_page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        buttom: 0;
        background: #f2f2f2;
        z-index: 202;
        height: 100%;
        .iconfont{
            font-size: 0.36rem;
        }
        .icon-touxiang{
            color: #3b95e9;
            font-size: 0.4rem;
        }
        .g2{
            .van-cell{
                .van-cell__title{
                    span{
                        position: absolute;
                        top:10px;
                        left: 44px;
                    }
                }
            }
            .van-cell__value{
                color: #6cacf5;
                .infotel{
                    color: #000;
                }
            }
            .icon-shouji1{
                color: #6c5651;
            }
            .icon-taobao{
                color: #e26f32;
            }
            .icon-zhifubao{
                color: #4aa0ee;
            }
            .icon-weibo-copy{
                color: #e88a54;
            }
            .icon-weixin{
                color: #52de6a;
            }
            .icon-eliaomo{
                color: #6cacf5;
            }

        }
        .btn{
            background: #ffffff;
            display: flex;
            justify-content: center;
            .van-button--danger{
                margin: 30px auto;
                width: 560px;
                border-radius: 5px;
            }
        }

    }

</style>
